<template>
  <div class="order-container">
    <el-tabs v-model="activeType" @tab-click="handleClick" class="segContainer">
      <el-tab-pane v-for="(item, index) in topTypes" :label="(item.num&&item.num>0)? (item.title+'('+item.num+')'):item.title"
        :name="item.id" :key="index" class="segItem"></el-tab-pane>
    </el-tabs>
    <el-form class="flex-row topFilter" style="padding: 0 10px;">
      <el-form-item label="订单创建时间"  class="flex-row marginR10 marginB10">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="开始日期" v-model="filterFormat.startDate" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="结束日期" v-model="filterFormat.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="订单号" class="flex-row marginR10 marginB10"><el-input v-model="filterFormat.orderNO" placeholder="请输入订单号"></el-input></el-form-item>
      <el-form-item label="订单状态" class="flex-row marginR10 marginB10" v-if="activeType == 'unNormal' || activeType == 'all'">
        <el-select v-model="filterFormat.status" clearable placeholder="全部状态">
          <template v-if="activeType == 'unNormal'">
            <el-option  v-for="item in abnormalStatus" :key="item.type"  :label="item.title"  :value="item.type"></el-option>
          </template>
          <template v-else>
            <el-option  v-for="item in allStatus" :key="item.type"  :label="item.title"  :value="item.type"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="护士" class="flex-row marginR10 marginB10"><el-input v-model="filterFormat.nur" placeholder="请输入护士姓名或工号"></el-input></el-form-item>
      <el-form-item label="预约人" class="flex-row marginR10 marginB10"><el-input v-model="filterFormat.orderPer" placeholder="请输入预约人"></el-input></el-form-item>
      <el-button type="primary" size="small" class="baseBtn" @click="searchAction">查询</el-button>
      <el-button type="primary" size="small" class="baseBtn" @click="resetFormat">重置</el-button>
    </el-form>
    <el-table v-loading="loading" :data="tableData" :height="tableHeight" style="width: 100%" :span-method="GroupRowSpan"
       :row-class-name="rowClassName" class="order-manage-table">
      <el-table-column prop="date" label="服务" header-align="center" align="left">
        <template slot-scope="scope">
          <template v-if="scope.$index%2==0">
            <div class="headItem">订单号：{{ scope.row.orderIdVO }}</div>
            <div class="headItem">创建时间：{{ scope.row.orderCreateTime }}</div>
            <div class="headItem">预约人：{{ scope.row.appointmentName }}</div>
          </template>
          <template v-else>
            <template v-for="orderInfo in scope.row.orderInfo">
              <div class="flex-row leftInfo">
                <template >
                  <image-preview :src="orderInfo.image" :width="48" :height="48" :border-radius="2"/>
                </template>
                <!--<el-image style="width: 48px; height: 48px;border-radius: 2px;" :src="orderInfo.image" fit="cover"></el-image>-->
                <div class="mid-con">
                  <div class="midTitle">{{orderInfo.name}}</div>
                  <div class="midSubTitle">{{ orderInfo.specName }}</div>
                </div>
                <div class="right-num">x{{orderInfo.count}}</div>
              </div>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="被服务人" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <div class="tdItem">{{ scope.row.serveInfo.servePerson }}</div>
          <div class="tdItem subText">{{ scope.row.serveInfo.serveTel }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="护士" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <template v-for=" nurseInfo in scope.row.nurseInfo">
            <div class="tdItem">{{ nurseInfo.name }}</div>
            <div class="tdItem subText">{{ nurseInfo.tel }}</div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="预付款" width="150" header-align="center" align="center">
        <template slot-scope="scope"><template v-if="scope.row.preFlag">
          <div class="tdItem">￥{{ convertMoney(scope.row.prePaid.totalAmount) }}</div>
          <div class="tdItem subText">
            <div>服务费￥{{ convertMoney(scope.row.prePaid.specAmount) }}</div>
            <div>耗材费￥{{ convertMoney(scope.row.prePaid.pkgAmount) }}</div>
            <div>车程费￥{{ convertMoney(scope.row.prePaid.taxiAmount) }}</div>
          </div>
        </template></template>
      </el-table-column>
      <el-table-column prop="name" label="应付款" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.actual&&scope.row.actFlag">
            <div class="tdItem">￥{{convertMoney(scope.row.actual.totalAmount)}}</div>
            <div class="tdItem subText">
              <div>服务费￥{{convertMoney(scope.row.actual.serviceItems.amount)}}</div>
              <div>耗材费￥{{convertMoney(scope.row.actual.packageItems.amount)}}</div>
              <div>车程费￥{{convertMoney(scope.row.actual.taxiItems.amount)}}</div>
              <div>其它费用￥{{convertMoney(scope.row.actual.otherItems.amount)}}</div>
            </div>
        </template>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="差额" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.difference&&scope.row.difference.amount!=0&&scope.row.actFlag">
            <div class="tdItem" :class="scope.row.difference.amount>0?'plusMoney':'refund'">{{scope.row.difference.amount>0?'补差':'退款'}}</div>
            <div class="tdItem abnormalTip">{{scope.row.difference.amount<0?'-':''}}￥{{ (convertMoney(scope.row.difference.amount)+'').replace('-','') }}</div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="交易状态" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <div class="tdItem status">{{scope.row.orderStatus}}</div>
          <div class="tdItem abnormalTip">{{scope.row.orderError ||'' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" width="120" header-align="center" align="center">
        <template slot-scope="scope">
          <div class="tdItem detailBtn" @click="showDetail(scope)">订单详情</div>
          <div class="tdItem detailTrack" @click="showTrack(scope)">订单跟踪</div>
        </template>
      </el-table-column>
  </el-table>
  <el-pagination class="bottomPage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currPage"
      :page-sizes="[10, 20, 30, 40,50,100]"
      :page-size.sync="pageSize"
      :background="true"
      layout="sizes, prev, pager, next, total"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogTrackVisible" width="940" height="790" class="trackDiag">
      <div slot="title"><i class="el-icon-location-outline"></i><span>订单追踪</span></div>
      <OrderTrack :row="selRow" @CloseTable="CloseTrackTable"></OrderTrack>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTrackVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogDetailVisible" :show-close="false" class="detailDialog" :fullscreen="true">
      <OrderDetail :row="selRow" @CloseTable="CloseDetailTable"></OrderDetail>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderList,getAllStatus,getErrorStatus} from "@/api/service/ordermanage";
import { convertToCNY} from "@/utils/currency";
import OrderDetail from '../orderDetail/index.vue';
import OrderTrack from './orderTrack.vue';
export default {
  name: 'OrderManage',
  components: {
    OrderDetail,OrderTrack
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      topTypes: [{ title: '异常订单', num: 0, id: 'unNormal' }, { title: '待服务', num: 0, id: 'unserved' },
        {title: '服务中', num: 0, id: 'serving'}, {title: '待结算', num: 0, id: 'unsettled'},
        {title: '取消订单', num: 0, id: 'canceled'}, {title: '全部订单', num: 0, id: 'all'}],
      activeType: 'unNormal',
      allStatus:[],
      abnormalStatus:[],
      filterFormat:{
        startDate:'', //开始日期
        endDate:'',
        orderNO:'', //订单号
        status:'', //状态
        nur:'', //护士
        orderPer:'', //预约人
      },
      tableHeight:400,
      tableData: [],
      currPage:1,
      pageSize:10,
      total:0,
      dialogTrackVisible:false,
      dialogDetailVisible:false,
      selRow:{}
    };
  },
  created() {
    this.tableHeight = document.documentElement.clientHeight - 50 - 46 - 52 - 80
    this.loadOrderList()
    this.loadAllStatus()
    this.loadAbnormalStatus()
  },
  beforeRouteLeave (to, from, next) {
    if(this.dialogDetailVisible){
      this.dialogDetailVisible = false;
      return
    }
    this.dialogDetailVisible = false;
    this.dialogTrackVisible = false
    next()
  },
  methods: {
    loadAllStatus(){
      getAllStatus({}).then(response => {
        if(response.data){
          this.allStatus = response.data;
        }
      }).catch(res => {

      });
    },
    loadAbnormalStatus(){
      getErrorStatus({}).then(response => {
        if(response.data){
          this.abnormalStatus = response.data;
        }
      }).catch(res => {

      });
    },
    loadOrderList(){
      this.loading = true;
      let params = {labelStatus:this.activeType,page:this.currPage-1,size:this.pageSize}
      getOrderList(params).then(response => {
        this.loading = false;
        if(response.code!=200){
          this.$message.error(response.msg);
          return
        }
        if(!response.data){
          this.tableData = []
          return
        }
        if(this.currPage == 1){
          this.total = response.data.totalElements;
          this.dealTopNum(this.total)
        }
        let arr = response.data.content;
        let newArr = []
        for(let i = 0;i < arr.length;i++){
          newArr.push(arr[i])
          newArr.push(arr[i])
        }
        this.tableData = newArr
      }).catch(res => {
        this.loading = false;
        this.$message.error(res);
      });
    },
    handleClick() {
      this.currPage = 1
      this.filterFormat.status = ''
      this.loadOrderList()
    },
    handleSizeChange(){
      this.currPage = 1
      this.loadOrderList()
    },
    handleCurrentChange(){
      this.loadOrderList()
    },
    searchAction(){
      this.currPage = 1
      this.loadOrderList()
    },
    resetFormat(){
      this.filterFormat = {
        startDate:'', //开始日期
        endDate:'',
        orderNO:'', //订单号
        status:'', //状态
        nur:'', //护士
        orderPer:'', //预约人
      }
    },
    dealTopNum(num){
      for(let i = 0; i < this.topTypes.length;i++){
        let dict = this.topTypes[i]
        if(dict.id == this.activeType){
          dict.num = num
          this.topTypes.splice(i,1,dict)
        }
      }
    },
    showDetail(scope){
      this.selRow = scope.row
      this.dialogDetailVisible = true
    },
    showTrack(scope){
      console.log(scope)
      this.selRow = scope.row
      this.dialogTrackVisible = true
    },
    GroupRowSpan({ row, column, rowIndex, columnIndex }) {
        if (rowIndex%2==0&&columnIndex==0) {
            return [1, 8];
        } else if (rowIndex%2==0&&columnIndex>0) {
            return [0, 0];
        } else {
            return [1, 1];
        }
    },
    rowClassName(row){
      return row.rowIndex%2==0?"rowHead":'normalRow'
    },
    CloseTrackTable(){
      this.dialogTrackVisible = false
    },
    CloseDetailTable(){
      this.dialogDetailVisible = false
      //
    },
    convertMoney(amount){
      return convertToCNY(amount)
    }
  }
}
/*allStatus:[{"id": "1","title": "待付款","type": "unPay"},{"id": "5","title": "待派单","type": "unSend"},
        {"id": "6","title": "待接单","type": "unAccept"},{"id": "8","title": "待出发","type": "unStart"},
        {"id": "9","title": "待抵达","type": "unArrive"},{"id": "9","title": "待抵达","type": "unArrive"},
        {"id": "10","title": "服务中","type": "serving"},{"id": "11","title": "待提交结算","type": "unSettled"},
        {"id": "12","title": "待支付尾款","type": "unPayLast"}, {"id": "15","title": "交易完成","type": "finisah"},
	      {"id": "999","title": "交易关闭","type": "stop"},{"id": "2","title": "已取消","type": "canceled"}], */
</script>
<style lang="scss">
.order-container{
  .flex-row{
    display: flex;
  }
  .leftInfo{
    align-items: center;
    margin-top: 10px;
  }
  .leftInfo:first-child{
    margin-top: 0;
  }
  .topFilter{
    .el-form-item__label{
      white-space: nowrap;
    }
    .el-select-dropdown__item{
      color: #606266;
    }
  }
  .segContainer{
    padding-left: 20px;
    height: 50px;
  }
  .segItem{
    margin: 0;
  }
  .line{
    text-align: center;
  }
  .el-tabs__nav-wrap::after{
    background-color: #FFFFFF;
  }
  .baseBtn{
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    line-height: 36px;
  }
  .marginR10{
    margin-right: 10px;
  }
  .marginB10{
    margin-bottom: 10px;
  }
  .el-pagination__total{
    float: right;
  }
  .bottomPage{
    margin-top: 10px;
    background: #F8F8F8;
  }
  .order-manage-table.el-table .el-table__header-wrapper th,
  .order-manage-table.el-table .el-table__fixed-header-wrapper th{
    background-color: #F2F3FF ;
  }

  .rowHead{
    background-color: #F8F8F8!important;
    padding: 0;
  }
  .order-manage-table.el-table td.el-table__cell{
    border: none !important;
  }
  .mid-con{
    width: calc(100% - 130px);
    padding-left: 5px;
  }
  .mid-con .midTitle{
    color: #3399F4;
    font-size: 14px;
  }
  .mid-con .midSubTitle{
    color: #BEBEBE ;
    font-size: 13px;
  }
  .right-num{
    width: 80px;
    text-align: right;
    padding-right: 10px;
    color: #101010;
    font-size: 14px;
  }

  .headItem{
    display: inline-block;
    margin-right: 20px;
  }
  .headItem:first-child{
    margin-left: 10px;
  }
  .tdItem{
    font-size: 14px;
    color: #101010;
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  .order-manage-table .refund,.order-manage-table .plusMoney{
    width: 44px;
    height: 19px;
    line-height: 20px;
    border-radius: 2px;
    text-align: center;
    border: 1px solid #3AB54A;
    color: #3AB54A;
    font-size: 12px;
  }
  .order-manage-table .plusMoney{
    color: #D81E06;
    border-color: #D81E06;
  }
  .subText{
    color: #BEBEBE;
    font-size: 13px;
  }
  .abnormalTip{
    color: #D81E06;
    font-size: 13px;
  }
  .refund + .abnormalTip{
    color: #3AB54A;
  }
  .detailBtn,.detailTrack{
    color: #3399F4;
  }
  .detailTrack{
    margin-top: 5px;
  }

  .trackDiag .el-dialog__header{
    padding: 0;
  }
  .trackDiag .el-dialog__headerbtn{
      top: 10px;
      right: 15px
  }
  .trackDiag .el-dialog__headerbtn .el-dialog__close{
    color: #BEBEBE;
  }
  .track-header{
    display: flex;
    align-items: center;
    border-bottom: solid 1px #DBDBDB;
    height: 36px;
    padding-left: 10px;
  }
  .detailDialog {
    .el-dialog__header,.el-dialog__body{
      padding: 0;
    }
  }
  .trackDiag {
    .el-dialog__header,.el-dialog__body{
      padding: 0;
    }
    .el-dialog__header{
      padding: 10px;
      border-bottom: solid 1px #DBDBDB;
      .el-dialog__headerbtn{
        top: 10px;
        right: 10px;
      }
    }
    .el-dialog__body{
      padding-top: 10px;
      padding-bottom: 10px;
      .flex-row{
        display: flex;
        margin-top: 10px;
        .dealTip{
          width: 65px;
          margin-right: 10px;
          height: 30px;
          line-height: 40px;
        }
        .dealCon{
          flex: 1;
        }
      }
    }
    .dialog-footer{
      text-align: center;
    }
  }
}




</style>
